﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="Generator" content="xnr®">
  <meta name="Author" content="小男人-923227829@qq.com">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>菜单管理</title>
  <link rel="stylesheet" href="../inc/layui/css/layui.css">
  <link rel="stylesheet" href="../css/comm.css">
  <style>
    .layui-btn-xstree {
      height: 35px;
      line-height: 35px;
      padding: 0px 5px;
      font-size: 12px;
    }

    .layui-form-radio {
      display: inline-block;
      vertical-align: middle;
      line-height: 28px;
      margin: 6px 10px 0 0;
      padding-right: 10px;
      cursor: pointer;
      font-size: 0;
    }

    .layui-border-box {
      height: auto !important;
    }
  </style>
</head>

<body>
  <header>
    <div class="layui-form" id="search-form">
      <div class="demoTable" style="margin-bottom: 10px;">
        <button class="layui-btn" onclick="add()">新增菜单</button>
      </div>
    </div>
  </header>
  <table class="layui-hidden" id="treeTable" lay-filter="treeTable"></table>
</body>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
</script>
<script type="text/html" id="formTpl">
    <div id="form" class="layui-form" style="margin-top: 20px;margin-right: 20px;">
        <input type="hidden" value="{{d.pid}}" name="pid" id="pid"/>
        <input type="hidden" value="{{d.menuId}}" name="menuId" id="menuId"/>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单名称</label>
            <div class="layui-input-block">
                <input value="{{d.menuName}}" type="text" name="menuName" lay-verify="required" id="menuName"
                       autocomplete="off" placeholder="请输入菜单名称" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单url</label>
            <div class="layui-input-block">
                <input value="{{d.url}}" type="text" name="url" id="url" autocomplete="off" placeholder="请输入菜单url"
                       class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">菜单排序</label>
            <div class="layui-input-block">
                <input value="{{d.sort}}" type="number" name="sort" lay-verify="required" id="orderindex"
                       autocomplete="off" placeholder="请输入菜单排序" class="layui-input"/>
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">图标</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="upFace">上传图片</button>
                    <div id="img">
                    </div>
                    <br>
                </div>
                <input type="hidden" name="icon" id="icon" value="">
            </div>
        </div>
        <div class="layui-form-item ">
            <label class="layui-form-label">图标</label>
            <div class="layui-input-block">
                <div id="btntransfer" class="demo-transfer"></div>
            </div>
        </div>
        <div class="center">
            <button class="layui-btn layui-btn-danger" lay-submit="" lay-filter="sub">保存</button>
            <button class="layui-btn layui-btn-primary" id="closeform">取消</button>
        </div>
    </div>
</script>
<script type="text/html" id="faceTpl">
    {{# if(d.icon && d.icon != ""){ }}
    <img src="{{Comm.OSS.getImgUrl(d.icon, 's')}}" style="width:30px;height:30px;border-radius:30px;"
         onclick="Comm.OSS.showimg(this)"/> {{# }else{ }}
    <span>-</span> {{# } }}
</script>

<script type="text/javascript" src="../inc/g.js"></script>
<script type="text/javascript" src="../inc/layui/layui.js"></script>
<script type="text/javascript" src="../inc/area.js"></script>
<script type="text/javascript">
  /**
   * 对layui进行全局配置
   */
  layui.extend({
    treeGrid: '../../inc/layui/lay/treeGrid'
  })

  function pageload() {
    layui.extend({
      pca: '../../inc/layui/lay/pca'
    })

    layui.use(['tree', 'treeGrid', 'transfer', 'util'], function () {
      Comm.transfer = layui.transfer;
      Comm.treeGrid = layui.treeGrid, active = {
        add: function () {
          save(null, 0)
        }
      };
      AJAX.GET('/admin/menu/button/list?', function (d) {
        if (d.code == 1) {
          Comm.buttonList = d.data
        }
      });
      Comm.treeGrid.render({
        id: 'treeTable',
        elem: '#treeTable',
        url: '/admin/menu/list?force=1',
        cellMinWidth: 100,
        idField: 'menuId', //必須字段
        treeId: 'menuId', //树形id字段名称
        treeUpId: 'pid', //树形父id字段名称
        treeShowName: 'menuName', //以树形式显示的字段
        heightRemove: [".dHead", 100], //不计算的高度,表格设定的是固定高度，此项不生效
        height: '100%',
        isFilter: false,
        iconOpen: true, //是否显示图标【默认显示】
        isOpenDefault: false, //节点默认是展开还是折叠【默认展开】
        loading: true,
        method: 'get',
        cols: [
          [{
            checkbox: true
          }, {
            field: 'menuId',
            title: 'id',
            width: 80
          }, {
            field: 'menuName',
            title: '菜单名称',
            width: 150
          }, {
            field: 'pid',
            title: '父级id'
          }, {
            field: 'url',
            title: '链接'
          }, {
            field: 'sort',
            title: '排序'
          }, {
            field: 'icon',
            title: "图标",
            templet: "#faceTpl"
          }, {
            title: '操作',
            width: 180,
            align: 'center',
            templet: function (d) {
              var addBtn = '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加子级</a>';
              var editBtn = '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>';
              var delBtn = '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
              return addBtn + editBtn + delBtn;
            },
            width: 220
          }]
        ],
        isPage: false,
        parseData: function (res) { //数据加载后回调
          return res;
        },
        onClickRow: function (index, o) {
          console.log(index, o, "单击！");
        },
        onDblClickRow: function (index, o) {
          console.log(index, o, "双击");
        },
        pullData: function (index, o) {
          console.log(index, o, "11");
        }
      });

      Comm.treeGrid.on('tool(treeTable)', function (obj) {
        if (obj.event === 'edit') { //修改行
          save(obj.data)
        } else if (obj.event === "add") { //添加行
          save(null, obj.data.menuId)
        } else if (obj.event === "del") { //删除
          Comm.confirm('确认删除吗？如果删除一级菜单，下属二级菜单会全部删除', function () {
            AJAX.POST('/admin/menu/delete', {
              menuId: obj.data.menuId
            }, function (d) {
              if (d.code == 1) {
                layer.msg("删除成功!", {
                  icon: 1
                });
                //执行重载
                Comm.treeGrid.reload('treeTable', {});
              } else {
                layer.msg("删除失败!", {
                  icon: 5
                })
              }
            })
          })
        }
      });

      //添加按钮点击事件
      $('.demoTable .layui-btn').on('click', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
      });
    });
  }

  function renderImg(d) {
    var faceNum = 0;
    if (d.icon && d.icon != "") {
      faceNum = 1;
    }

    //初始化上传图片
    Comm.upload.render({
      elem: '#upFace', //绑定元素
      field: 'file',
      accept: 'images',
      acceptMime: 'image/jpg,image/png,image/JPEG',
      multiple: false, //单图
      url: config.ossroot,
      before: function (obj, o) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
        //上传loading
        top.Comm.layer.load(0);
      },
      done: function (d) {
        faceNum++;
        var htmlStr1 = "<div class=\"layui-upload-list\">";
        htmlStr1 += "<img class=\"layui-upload-img\" src=\"" + Comm.OSS.getImgUrl(this.data.key, "s") +
          "\" style=\"max-width: 200px;max-height: 200px;\" data=\"" + this.data.key + "\"/><br/>";
        htmlStr1 +=
          "<button type=\"button\" class=\"layui-btn layui-btn-xs layui-btn-danger\" onclick=\"$(this).parent().remove()\" style='margin-top: 10px'>删除</button></div>";
        $("#icon").val(this.data.key);
        if (faceNum > 1) {
          $("#img").html(htmlStr1);
        } else {
          $("#img").append(htmlStr1);
        }
        top.layer.closeAll('loading'); //关闭loading
      },
      error: function () {
        //请求异常回调
        layer.closeAll('loading'); //关闭loading
      }
    });
  }

  //保存方法
  function save(d, pid) {
    var title = "新增菜单",
      url = "/admin/menu/add"
    if (d != null) {
      title = "编辑菜单", url = "/admin/menu/update"
    } else {
      d = {
        menuName: "",
        url: "",
        icon: "",
        orderindex: "",
        pid: pid,
        menuId: ''
      };
    }
    title = title + (d.menuName != "" ? "-" + d.menuName : "")
    Comm.laytpl($("#formTpl").html()).render(d, function (html) {
      //多窗口模式，层叠置顶
      layer.open({
        type: 1,
        title: title,
        shade: 0.3,
        area: ['750px', '750px'],
        maxmin: true,
        content: html,
        // zIndex: layer.zIndex, //重点1
        success: function (layero) {
          Comm.transfer.render({
            id: 'btntransfer',
            elem: '#btntransfer',
            data: Comm.buttonList,
            parseData: function (res) {
              return {
                "value": res.btnId, //数据值
                "title": res.btnName, //数据标题
                "disabled": res.disabled, //是否禁用
                "checked": res.checked, //是否选中
              }
            },
            value: d.btnIds ? d.btnIds.split(',') : []
          })

          renderImg(d);

          if (d.icon && d.icon != "") {
            var htmlStr1 = "<div class=\"layui-upload-list\">";
            htmlStr1 += "<img class=\"layui-upload-img\" src=\"" + Comm.OSS.getImgUrl(d.icon, "s") +
              "\" style=\"max-width: 200px;max-height: 200px;\" data=\"" + d.icon + "\"/><br/>";
            htmlStr1 +=
              "<button type=\"button\" class=\"layui-btn layui-btn-xs layui-btn-danger\" onclick=\"$(this).parent().remove()\" style='margin-top: 10px'>删除</button></div>";
            $("#img").html(htmlStr1)
          }

          Comm.form.render("form");
          //监听指定开关
          Comm.form.on('submit(sub)', function (data) {
            data.field.uid = 0;
            data.field.status = 1;
            data.field.btnId = [];
            var getBtnData = Comm.transfer.getData('btntransfer'); //获取右侧数据
            if (getBtnData && getBtnData.length > 0) {
              for (var i = 0; i < getBtnData.length; i++) {
                data.field.btnId.push(getBtnData[i].value)
              }
            }
            data.field.btnId = data.field.btnId.join(',');
            Comm.layer.load(2);
            AJAX.POST(url, data.field, function (d) {
              if (d.code == 1) {
                layer.closeAll();
                Comm.msg("保存成功!", 1);
                //执行重载
                Comm.treeGrid.reload('treeTable', {});
              } else {
                Comm.msg("保存失败!", 5)
              }
            }, true, true)
          });
          $("#closeform").click(function () {
            layer.closeAll();
          })
        },
      });
    })
  }


  function add() {
    save(null, 0)
  }

  function update() {
    var d = Comm.treeGrid.checkStatus('treeTable'); //获取选中的数据

  }

  function del() {
    var d = Comm.treeGrid.checkStatus('treeTable'); //获取选中的数据
  }
</script>

</html>